<!--
    Powered By nodeppt - This is probably the best web presentation tool so far!
    version: 1.4.5
    site: https://github.com/ksky521/nodeppt
    date: 
-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>learn-js-1 - By zhuchentong</title>
    <link rel="stylesheet" media="all" href="./css/nodeppt.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="./css/phone.css">
    
    <link rel="stylesheet" href="./js/highlight/styles/monokai_sublime.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    
<link rel="stylesheet" href="./css/theme.moon.css">
</head>
<body>
<div class="slides">
    <slides id="container">
        <slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>闭包与作用域</h1>
<h2>演讲者 zhuchentong</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>编程语言的开始</h1>
<h2>变量的存储和访问</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>作用域 - 变量存储访问规则</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>编译器</h2>

</hgroup><article>

<ul class="fadeIn">
<li><h2>分词/词法分析 </h2>
</li>
<li><h2>解析/语法分析</h2>
</li>
<li><h2>代码生成</h2>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>我是编译器</h2>

</hgroup><article>

<pre><code class="javascript">var a = 2
</code></pre>
<ul class="fadeIn">
<li>LSH - 赋值 </li>
<li>RSH - 取值</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>再复杂一点</h2>

</hgroup><article>

<pre><code class="javascript">function foo(a) {
  console.log(a); // 2
}

foo(2)
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>嵌套的作用域</h2>

</hgroup><article>

<pre><code class="javascript">function foo(a){
  console.log(a+b)
}

var b = 2

foo(2)
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>需要注意的事情</h2>
<ul class="fadeIn">
<li><p>LHS未找到目标时会在全局作用域创建变量</p>
</li>
<li><p>RHS未找到目标时会抛出ReferenceError异常</p>
</li>
<li><p>RHS找到变量不符合目标类型时会抛出TypeError异常</p>
</li>
<li><p>严格模式 - 禁止自动隐式创建全局变量,这时LHS也会抛出ReferenceError异常</p>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>词法作用域</h2>
<ul>
<li>遮蔽效应</li>
<li>window.a</li>
<li>foo.abc.def</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h2>欺骗词法作用域</h2>
<ul>
<li><h1>eval</h1>
</li>
<li><h1>with</h1>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>eval</h2>
<pre><code class="javascript">function foo(str,a){
  eval( str )
  console.log(a,b)
}

var b = 2

foo(&quot;var b =3 &quot;, 1)
</code></pre>

</hgroup><article>

<p>严格模式下<code>eval</code>有着自己独立的作用域</p>
<p><code>setTimeout</code> 和 <code>setInterval</code> 与  <code>eval</code> 相似</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>with</h2>
<pre><code class="javascript">function foo(obj){
  with(obj){
    a = 2
  }
}

var obj1 = {
  a:3
}

var obj2 = {
  b:3
}

foo(obj1)
console.log(obj1.a) // 2

foo(obj2)
console.log(o2.a) // undifined
console.log(window.a) // 2
</code></pre>
<h2>with可以将一个对象处理成一个词法作用域</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>with,eval阻止了性能优化</h2>

</article></section></slide>
        

        <!-- <slide class="slide logoslide dark nobackground">
            <article class="flexbox vcenter">
                <h2 style="color: white;">Powered By nodeppt v1.4.5</h2>
            </article>
        </slide> -->
        <div class="slideTip" id="tip"></div>
    </slides>
</div>
<canvas id="drawBoard" class="draw-board" width="900" height="700"></canvas>
<div class="progress"><span id="progress"></span></div>
<div id="_buttons">
    <div class="_btn-box" id="_btn-box" style="display:none;">
        <button class="fa fa-arrow-circle-left" id="_btn-prev"></button>
        <button class="fa fa-arrow-circle-right" id="_btn-next"></button>
        <button class="fa fa-paint-brush" id="_btn-brush"></button>
        <button class="fa fa-compress" id="_btn-overview" data-toggle="fa fa-expand"></button>
    </div>
    <button class="fa fa-bars" id="_btn-bar"  data-toggle="fa fa-close"></button>
</div>
<script src="./js/mixjs/lib/mix.0.3.0.min.js"></script>
<script>
    var ASSET_RELATIVE_DIR = ".";
</script>
<script>
var base = location.protocol + '//' + location.host;

var path = (location.pathname + '#').split('/').filter(function(v){
    return !!v;
});
path.pop();
path = path.join('/');
if (typeof ASSET_RELATIVE_DIR === 'string') {
    path = path + '/' + ASSET_RELATIVE_DIR;
}
MixJS.config({
    baseURL: [ base, path, 'js'].join('/')+'/'
});

</script>
<script src="./js/mixjs/lib/event/broadcast.js"></script>
<script src="./js/nodeppt.js"></script>
<script>
Slide.init({
    containerID: 'container',
    drawBoardID: 'drawBoard',
    slideClass: '.slide',
    buildClass: '.build',
    progressID: 'progress',
    transition: 'cards',
    width: 1100,
    dir: './',
    
    //打开下面的注释就开启postMessage方式
    //访问网址127.0.0.1:8080/ppt/demo#client
    control:{
        type: 'postMessage',
        args:{
            isControl:  false
        }
    },
    
    tipID: 'tip'
});
MixJS.loadJS('highlight/highlight.pack.js',function(){
    hljs.tabReplace = '  ';
    hljs.initHighlightingOnLoad();
});
</script>
<script src="./js/demo.js"></script>
<link rel="stylesheet" href="./css/demo.css">

<!--placeholder-->
</body>
</html>
